<template>  
  <div class="teacher-search">  
    <div class="search-bar">  
      <input  
        v-model="searchQuery"  
        placeholder="输入老师姓名"  
      />  
      <button @click="searchCourses">查询</button>  
    </div>  
    <div v-if="showTable">  
      <table>  
        <thead>  
          <tr>  
            <th>任课教师</th>  
            <th>任课科目</th>  
            <th>任课教室</th>  
            <th>任课时间</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr v-for="course in filteredCourses" :key="course.id">  
            <td>{{ course.teacherName }}</td>  
            <td>{{ course.subject }}</td>  
            <td>{{ course.classroom }}</td>  
            <td>{{ course.time }}</td>  
          </tr>  
        </tbody>  
      </table>  
    </div>  
    <p v-else>请输入老师姓名并点击查询按钮以查看课程安排。</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      searchQuery: '',  
      allCourses: [  
        { id: 1, teacherName: '张老师', subject: '数学', classroom: '101', time: '周一 8:00-10:00' },  
        { id: 2, teacherName: '李老师', subject: '英语', classroom: '202', time: '周二 10:00-12:00' },  
        { id: 3, teacherName: '王老师', subject: '物理', classroom: '303', time: '周三 14:00-16:00' },  
      ],  
      filteredCourses: [],  
      showTable: false,  
    };  
  },  
  methods: {  
    searchCourses() {  
      const query = this.searchQuery.trim().toLowerCase();  
      this.filteredCourses = this.allCourses.filter(course =>  
        course.teacherName.toLowerCase().includes(query)  
      );  //filter过滤
      this.showTable = this.filteredCourses.length > 0;  
      if (!this.showTable) {  
        alert('查无此人');  
      }  
    },  
  },  
};  
</script>  
  
<style scoped>  
.teacher-search {  
  max-width: 600px;  
  margin: 0 auto;  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 8px;  
}  
  
.search-bar {  
  margin-bottom: 20px;  
  display: flex;  
  align-items: center;  
}  
  
.search-bar input {  
  width: calc(100% - 100px);  
  padding: 10px;  
  box-sizing: border-box;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
}  
  
.search-bar button {  
  padding: 10px 20px;  
  margin-left: 10px;  
  border: none;  
  background-color: #007bff;  
  color: white;  
  border-radius: 4px;  
  cursor: pointer;  
}  
  
.search-bar button:hover {  
  background-color: #0e3a69;  
}  
  
table {  
  width: 100%;  
  border-collapse: collapse;  
  margin-top: 20px;  
}  
  
th, td {  
  padding: 10px;  
  border: 1px solid #ddd;  
  text-align: left;  
}  
  
th {  
  background-color: #f4f4f4;  
}  
</style>